<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 个人
                </el-breadcrumb-item>
                <el-breadcrumb-item>我的信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form1" :rules="rules" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form1.name" style="width:30%" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="form1.sex" placeholder="请选择" style="width: 30%">
                            <el-option key="男" label="男" value="男"></el-option>
                            <el-option key="女" label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="联系电话" style="width:40% " prop="cellphone">
                        <el-input v-model="form1.cellphone"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱" style="width:40% " prop="email">
                        <el-input v-model="form1.email"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button @click="getData">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {getOne, updateInfo} from "../../api/admin";
    import { validatePhone,validateEmail} from "../../utils/validate";
    export default {
        name: 'baseform',
        data() {
            return {
                form1: {
                    name: '',
                    sex: '',
                    cellphone: '',
                    email: ''
                },
                rules:{
                    cellphone: [{required:true,trigger:'blur',validator:validatePhone}],
                    email:[{required:true,trigger:'blur',validator:validateEmail}]
                   // phone:
                   // [{required:true,message:'请输入正确的手机号',trigger:'blur'},
                   //     {validator:function(rule,value,callback){
                   //         if (/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value) == false){
                   //             callback(new Error("请输入正确的手机号格式"));
                   //         }else{
                   //             callback();
                   //         }
                   //     }, trigger: 'blur'}],

                }
            };
        },
        created() {
            this.getData();
        },
        methods: {
            // validateEmail(rule,value,callback){
            //     const emailReg=/^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})$/
            //     if (!value){
            //         callback(new Error("邮箱不能为空！"));
            //     }
            //     setTimeout(()=>{
            //         if (!emailReg.test(value)){
            //             callback(new Error("邮箱格式错误！"));
            //         }else{
            //             callback();
            //         }
            //     },100)
            // },
            // validatePhone(rule,value,callback){
            //     if (/^[1][3,4,5,7,8][0-9]{9}$/.test(value) == false){
            //         callback(new Error("请输入正确的手机号格式"));
            //     }else{
            //         callback();
            //     }
            // },
            getData() {
                let user = JSON.parse(localStorage.getItem('user'));
                console.log(user.username)
                // console.log(validateEmail+'这是我的email');
                // console.log(validatePhone+'这是我的phone');
                getOne(user.username).then(res => {
                    console.log(res)
                     this.form1.name=res.data.username;
                     this.form1.sex=res.data.usersex;
                     this.form1.cellphone=res.data.usertel;
                     this.form1.email=res.data.useremail;
                });

            },
            onSubmit() {
                 let user = JSON.parse(localStorage.getItem('user'));
                updateInfo(JSON.stringify({'userid':user.userid,'username':this.form1.name,'usersex':this.form1.sex,'usertel':this.form1.cellphone,'useremail':this.form1.email})).then(res =>{
                    console.log(res);
                    if(res.state==2000){
                        this.$message.success('修改成功！');
                    }else{
                        this.$message.error(res.message);
                    }

                    this.getData();
                })
            }
        }
    };
</script>
